<template>
  <div class="recipelist" v-if="recipe">
    <van-loading v-if="!recipe" size="30px" vertical>加载中...</van-loading>
    <div class="img">
      <video
        :src="video"
        autoplay="autoplay"
        controls="controls"
        preload="auto"
      ></video>
      <van-sticky>
        <div class="icon">
          <div
            class="iconfont icon-arrowRight-copy-copy"
            @click="$router.go(-1)"
          ></div>
          <div class="right">
            <i class="iconfont icon-pengyouquan"> </i>
            <i class="iconfont icon-weixin"> </i>
            <i class="iconfont icon-diandiandian"></i>
          </div>
        </div>
      </van-sticky>
    </div>
    <div class="contain">
      <div class="title">{{ recipe.title }}</div>
      <span>精品</span>
      <span>独家</span>
      <span>浏览 {{ recipe.views_count_text }}</span>
      <span>收藏 {{ recipe.favo_counts }}</span>
      <div class="cookstory">{{ recipe.cookstory }}</div>
      <div class="detailed-list">食材清单</div>
    </div>

    <div class="items">
      <div class="item" v-for="(value, index) in recipe.major" :key="index">
        <div class="left">{{ value.title }}</div>
        <div class="right">{{ value.note }}</div>
      </div>
    </div>

    <div class="step">
      <div class="title">烹饪步骤</div>
      <div
        class="steplist"
        v-for="(key, index) in recipe.cookstep"
        :key="index"
      >
        <div class="position">步骤{{ key.position }}</div>
        <div class="img"><img :src="key.image" alt="" /></div>
        <div class="content">{{ key.content }}</div>
      </div>
    </div>

    <div class="create_time">发布于 2021-12-29 11:27:31</div>
    <div class="foot">
      <input
        type="text"
        placeholder="说点什么吧..."
        v-model="inputcomments"
        @keyup.enter="send"
      />
      <div class="right">
        <div class="iconfont icon-pinglun" @click="showPopup"></div>
        <div class="num">{{ comments.comments.length }}</div>
        <div
          :class="['iconfont', iconn ? 'icon-aixin' : 'icon-aixin1']"
          @click.stop="toggles"
        ></div>
        <div class="likenum">{{ likenum }}</div>
        <div
          :class="[
            'iconfont',
            icon ? 'icon-shoucang' : 'icon-shoucang-tianchong',
          ]"
          @click.stop="toggle"
        ></div>
        <div class="sc">{{ sc }}</div>
      </div>
    </div>
    <!-- 评论 -->
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '60%' }"
    >
      <div class="top" v-if="comments">
        全部评论 ({{ comments.comments.length }})
      </div>
      <div class="tain">
        <div
          class="containn"
          v-for="(item, index) in comments.comments"
          :key="index"
        >
          <div class="left">
            <div class="img">
              <img :src="item.u.p" alt="" />
            </div>
            <div class="r">
              <div class="t">
                <div class="username">{{ item.u.n }}</div>
                <div class="lvl">LV.{{ item.u.lvl }}</div>
              </div>
              <div class="content_c">{{ item.content[0].c }}</div>
            </div>
          </div>
          <div class="right">
            <div
              :class="[
                'iconfont',
                item.like == 0 ? 'icon-aixin' : 'icon-aixin1',
              ]"
              @click.stop="togglee(index, item.like)"
            ></div>
            <div class="likenum">{{ item.like_count }}</div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="iconfont icon-xiaolian"></div>
        <input
          type="text"
          placeholder="我想说两句"
          v-model="inputcomments"
          @keyup.enter="send"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { Sticky } from "vant";
import { Popup } from "vant";
import { Loading } from "vant";
Vue.use(Loading);
Vue.use(Popup);
Vue.use(Sticky);
import { getRecipe, getcomments } from "../../api/home";
export default {
  data() {
    return {
      recipe: null,
      comments: null,
      sc: "收藏",
      likenum: 362,
      inputcomments: "",
      icon: true,
      iconn: true,
      show: false,
      info: {
        u: {
          lvl: 1,
          n: "Ninja",
          p: "http://tx1.douguo.net/upload/photo/1/1/1/70_5ef4441f687d47f348f17b4b7a982c15.png",
        },
        like_count: 0,
        like: 0,
        content: [
          {
            c: "111",
          },
        ],
      },
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    getRecipeFun() {
      let queryId = this.$route.query.id;
      this.video = this.$route.query.video;
      getRecipe(queryId).then((data) => {
        this.recipe = data.result.recipe;
        console.log(this.recipe);
      });
    },
    getcommentsFun() {
      let queryId = this.$route.query.id;
      getcomments(queryId).then((data) => {
        this.comments = data.result;
      });
    },
    send() {
      console.log(this.info);
      this.comments.comments.unshift(this.info);
      console.log(this.comments);
      this.inputcomments = "";
    },
    toggle() {
      this.icon = !this.icon;
      if (!this.icon) {
        this.sc = "已收藏";
      } else {
        this.sc = "收藏";
      }
    },
    toggles() {
      this.iconn = !this.iconn;
      if (!this.iconn) {
        this.likenum += 1;
      } else {
        this.likenum -= 1;
      }
    },
    togglee(index, like) {
      console.log(this.comments.comments[index].like_count);

      if (like == 0) {
        this.comments.comments[index].like = 1;
        this.comments.comments[index].like_count += 1;
      } else {
        this.comments.comments[index].like = 0;
        this.comments.comments[index].like_count -= 1;
      }
    },
  },
  created() {
    this.getcommentsFun();
    this.getRecipeFun();
  },
};
</script>


<style lang="less">
.recipelist {
  .img {
    position: relative;
    width: 100%;
    video {
      width: 100%;
    }
    .icon {
      width: 89%;
      position: absolute;
      display: flex;
      justify-content: space-between;
      align-items: center;
      top: 0px;
      color: #fff;
      padding: 0 20px;
      padding-bottom: 10px;
      padding-top: 30px;
      .iconfont {
        font-size: 25px;
      }

      .right {
        i {
          margin-left: 25px;
        }
      }
    }
  }
  .contain {
    margin: 0 20px;
    .title {
      font-size: 20px;
      color: #060606;
      margin-top: 18px;
      margin-bottom: 15px;
    }
    span {
      font-size: 10px;
      color: #9d9d9d;
      margin-right: 20px;
      margin-bottom: 28px;
    }
    .cookstory {
      color: #010101;
      font-size: 16px;
      margin-top: 25px;
      margin-bottom: 30px;
    }
    .detailed-list {
      font-weight: bold;
    }
  }
  .items {
    margin: 0 28px;
    .item {
      display: flex;
      justify-content: space-between;
      margin-top: 25px;
    }
  }
  .step {
    margin: 0 20px;
    margin-top: 35px;
    margin-bottom: 30px;
    .title {
      font-weight: bold;
    }
    .steplist {
      .position {
        margin-top: 20px;
      }
      .img {
        width: 100%;
        border-radius: 10px;
        margin-top: 16px;
        margin-bottom: 10px;
        img {
          width: 100%;
          border-radius: 10px;
        }
      }
    }
  }
  .create_time {
    margin: 0 20px;
    margin-bottom: 90px;
    color: #898989;
  }
  .foot {
    justify-content: space-between;
    box-shadow: 0px -15px 10px 0px #f4f4f4;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70px;
    display: flex;
    background-color: #ffffff;
    color: #111111;
    z-index: 1;
    input {
      width: 156px;
      height: 30px;
      margin-left: 15px;
      border: none;
      background: #f7f7f7;
      border-radius: 30px;
      padding-left: 15px;
    }
    .right {
      font-size: 10px;
      display: flex;
      margin-right: 15px;
      align-items: center;
      .iconfont {
        margin-right: 3px;
        margin-left: 10px;
        font-size: 20px;
        font-weight: bold;
      }
      .icon-aixin {
        font-size: 23px;
      }
      .icon-shoucang-tianchong {
        color: #fdc837;
      }
      .icon-aixin1 {
        color: #d62b2b;
      }
    }
  }
  .van-popup--bottom {
    border-radius: 15px 15px 0 0;
    .top {
      padding: 17px 251px 30px 0;
      margin-left: 15px;
      position: fixed;
      background: #fff;
      z-index: 1;
      font-weight: bold;
    }
    .van-popup__close-icon--top-right {
      top: 282px;
      right: 16px;
      position: fixed;
      background: #fff;
      z-index: 1;
    }
    .tain {
      margin-top: 82px;
      margin-bottom: 100px;
    }
    .footer {
      justify-content: space-between;
      box-shadow: 0px -10px 10px 0px #f4f4f4;
      align-items: center;
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 70px;
      display: flex;
      background-color: #ffffff;
      color: #111111;
      z-index: 1;

      input {
        width: 295px;
        height: 30px;
        margin-left: 15px;
        border: none;
        background: #f7f7f7;
        border-radius: 30px;
        padding-left: 15px;
        margin: 0 15px 0 18px;
      }
      .icon-xiaolian {
        margin-left: 15px;
        font-size: 21px;
        font-weight: bold;
      }
    }
    .containn {
      margin: 0 15px 30px 15px;
      display: flex;
      font-weight: bold;
      justify-content: space-between;
      .left {
        display: flex;
        .img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin-right: 10px;
          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
          }
        }
        .r {
          .t {
            display: flex;
            align-items: center;
            margin-bottom: 18px;
            margin-top: 6px;
            .username {
              font-size: 13px;
              margin-right: 10px;
            }
            .lvl {
              font-size: 10px;
              color: #a99f40;
            }
          }
          .content_c {
            font-size: 14px;
          }
        }
      }
      .right {
        display: flex;
        margin-top: 6px;
        .iconfont {
          font-weight: bold;
          margin-right: 3px;
        }
        .icon-aixin1 {
          color: #d62b2b;
        }
        .likenum {
          font-size: 14px;
        }
      }
    }
  }
}
</style>